<template>
  <div>
    <el-dialog title="请选择充值金额" :lock-scroll="false" :visible.sync="visible" @close="close" customClass="pay-layer">
      <ul class="clearfix">
        <li v-for="item in list" @click="selectPayItem(item)" :class="{active: price === item}">
          {{item}}熙币
        </li>
        <li style="padding-top: 0;" @click="selectPayItem()">
          <input type="input" v-model.trim="other" maxlength="6" placeholder="其它数量">
        </li>
      </ul>
      <p class="recharge-money">实付金额：<em>{{calcPrice}}元</em></p>
      <button class="recharge-submit" @click="goPay" slot="footer">确认充值</button>
    </el-dialog>
    <v-payNext ref="payNext"/>
  </div>
</template>
<script>
  import payNext from './payNext.vue' // 充值
  export default {
    data () {
      return {
        visible: false,
        price: 0,
        list: [10, 50, 100, 300, 500, 1000, 1500],
        other: ''
      }
    },
    methods: {
      close () {
        this.other = ''
        this.price = 0
      },
      showToggle () {
        this.visible = !this.visible
      },
      selectPayItem (price) {
        if (price) {
          this.other = ''
          this.price = price
        } else {
          this.price = 0
        }
      },
      goPay () {
        let price = this.calcPrice
        if (price < 1) {
          this.$message.error('请输入大于一元的整数!')
          return
        }
        this.$refs.payNext.showToggle(this.calcPrice)
      },
    },
    computed: {
      calcPrice () {
        if (/^[1-9]\d*$/.test(this.other)) {
          return this.other
        }
        if (this.price > 0) {
          return this.price
        }
        return 0
      }
    },
    components: {
      'v-payNext': payNext
    },
  }
</script>
<style lang="scss">
  .pay-layer {
    width: 485px;
    height: 270px;
    background-color: #ffffff;
    border-radius: 5px;
    $recharge-gutter: 15px;
    .el-dialog__header {
      text-align: center;
    }
    .el-dialog__title {
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      color: #333333;
      position: relative;
      &:before{
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        left: -30px;
        top: 10px;
      }
      &:after{
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        right: -30px;
        top: 10px;
      }
    }
    .el-dialog__body {
      padding: 20px 20px 0;
    }
    li {
      float: left;
      width: 100px;
      height: 35px;
      border-radius: 3px;
      border: solid 1px #dddddd;
      cursor: pointer;
      overflow: hidden;
      margin-right: 15px;
      margin-bottom: 20px;
      text-align: center;
      line-height: 35px;
      &:nth-child(4n){
        margin-right: 0;
      }
    }
    ul {
      overflow: hidden;
      margin-top: 20px;
    }
    .other {
      padding-top: 0;
      line-height: 62px;
      color: #999999;
    }
    input {
      display: block;
      width: 100%;
      border: none;
      text-align: center;
      line-height: 35px;
    }
    .active {
      border-color: #1968b1;
      color: #1968b1;
      position: relative;
      &:after{
        position: absolute;
        content: '';
        right: -1px;
        bottom: -1px;
        width: 21px;
        height: 17px;
        background: url("../../static/img/choose_icon.png");
      }
    }
  }
  .el-dialog__footer{
    padding-top: 0;
  }

  .recharge-submit {
    width: 115px;
    height: 30px;
    background-color: #1968b1;
    border-radius: 3px;
    color: #ffffff;
    display: block;
    margin: 0 auto;
  }

  .recharge-money {
    em {
      color: #1968b1;
    }
  }
</style>
